import React, { useState } from 'react';
import styles from './index.module.css';
import MarkdownRenderer from '@/components/MarkdownRenderer';
import { FORMAT_DATE_TIME, IChatItem } from '@/AI/useAI';
import AtomLogo from '@/assets/atom.png';
import AtomIntl from '@/utils/intl';
import dayjs from 'dayjs';
import CustomIcon from '@/components/CustomIcon';
import ChatLoading from '../Loading';
import { Button } from '@alicloudfe/components';
import ButtonCopy from '@/AI/components/ButtonCopy';

export default function ChatList(props: any) {
  const {
    chatList,
    currentRequest,
    setIsAsking,
    updateChatList,
    setPreviewingImg,
    setUserQuestion,
  } = props;


  return (
    <>
      {chatList.map((chatItem: IChatItem) => {
        const aType = [
          'answer',
          'answerLoading',
          'loading',
          'canceled',
        ];
        if (aType.includes(chatItem.type as typeof aType[number])) {
          return (
            <div className={styles.answerItem} key={`${chatItem.time}-${chatItem.content}`}>
              <div>
                <div className={styles.itemAvatorContainer}>
                  <img
                    className={styles.itemAvator}
                    src={chatItem.icon || AtomLogo}
                  />
                </div>
              </div>
              <div className={styles.itemContainer}>
                <div className={styles.itemInfo}>
                  <span>
                    {`${chatItem?.modelName} ${chatItem?.version}` || AtomIntl.get('AI_Chat_ChatWindow_index_Atomgit 助手')}
                  </span>
                  <span>
                    {chatItem.time || dayjs().format(FORMAT_DATE_TIME)}
                  </span>
                </div>
                <div className={styles.answerItemContentArea}>
                  <div className={styles.answerItemContent}>
                    {
                      chatItem.type === 'loading' ? (
                        <ChatLoading />
                      ) : (
                        <>
                          <div>
                            <MarkdownRenderer markdownText={chatItem.content} />
                          </div>
                          {
                            (chatItem.type === 'canceled') && (
                              <div className={styles.answerCanceled}>
                                {AtomIntl.get('AI_Chat_ChatWindow_index_已停止生成')}
                              </div>
                            )
                          }
                        </>
                      )
                    }
                  </div>
                  <div className={styles.answerOptLine}>
                    <div>
                      {
                        chatItem.type === 'answerLoading' ? (
                          <Button
                            text
                            type="primary"
                            onClick={() => {
                              if (currentRequest) {
                                currentRequest.current?.cancel('Cancel by user');
                                // eslint-disable-next-line no-param-reassign
                                chatItem.type = 'canceled';
                                updateChatList([...chatList]);
                                setIsAsking(false);
                              }
                            }}
                          >
                            {AtomIntl.get('AI_Chat_ChatWindow_index_停止生成')}
                          </Button>
                        ) : null
                      }
                    </div>
                    <div className={styles.chatItemOptIconContainer}>
                      <ButtonCopy text={chatItem.content} />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          );
        }
        if (chatItem.type === 'question') {
          return (
            <div
              className={styles.questionItem}
              key={`${chatItem.time}-${chatItem.content}`}
            >
              <div className={styles.itemContainer}>
                <div>
                  {chatItem.time}
                </div>
                {
                  chatItem?.image && (
                    <div
                      className={styles.questionImg}
                      onClick={() => {
                        setPreviewingImg(chatItem.image);
                      }}
                    >
                      <img
                        src={chatItem.image}
                      />
                    </div>
                  )
                }
                <div className={styles.questionItemContent}>
                  {chatItem.content}
                </div>
                <div className={styles.questionOptLine}>
                  <div className={styles.chatItemOptIconContainer}>
                    <CustomIcon
                      type="icon-projectOedit-line"
                      size={20}
                      onClick={() => {
                        setUserQuestion(chatItem.content);
                      }}
                    />
                  </div>
                  <div className={styles.chatItemOptIconContainer}>
                    <ButtonCopy text={chatItem.content} />
                  </div>
                </div>
              </div>
            </div>
          );
        }
        return null;
      })}
    </>
  );
}
